export const lineChart = {
    computed: {
        lineDate() {
            if (this.lineData) {
                return this.lineData.totalLine.map((item) => item.classify);
            } else {
                return [];
            }
        },
    },
    methods: {
        drawLine() {
            var lineChart = this.$echarts.init(document.getElementById("line-chart"));
            var option = {
                tooltip: {
                    backgroundColor: "rgba(255,255,255,.8)",
                    borderColor: "#2f74ff",
                    borderWidth: 1,
                    borderRadius: 0,
                    trigger: "axis",
                    axisPointer: {
                        type: "line",
                        z: "1",
                        lineStyle: {
                            width: 1,
                        },
                    },
                    textStyle: {
                        color: "#333333",
                    },

                    formatter: function (datas) {
                        var res = datas[0].name + "<br/>",
                            val;
                        for (var i = 0, length = datas.length; i < length; i++) {
                            val = datas[i].value;
                            res += datas[i].seriesName + "：" + val + "<br/>";
                        }
                        return res;
                    },
                },
                legend: {
                    itemWidth: 8,
                    itemGap: 30,
                    top: 0,
                    left: 130,
                    textStyle: {
                        color: "#adbcd8",
                    },
                    data: [
                        { name: "  全部", icon: "circle" },
                        { name: "  正面", icon: "circle" },
                        { name: "  负面", icon: "circle" },
                        { name: "  中立", icon: "circle" },
                    ],
                    selectedMode: true,
                    borderWidth: 0,
                },
                grid: {
                    left: "4%",
                    right: "50",
                    bottom: "0",
                    show: false,
                    containLabel: true,
                },
                xAxis: {
                    name: "日期",
                    nameTextStyle: {
                        color: "#a4b2cc",
                        align: "left",
                    },
                    type: "category",
                    boundaryGap: true,
                    data: this.lineDate,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#ebf2fc",
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                        interval: 0,
                        textStyle: {
                            color: "#a7b2c8",
                            align: "center",
                            fontSize: 12,
                        },
                        formatter: function (value) {
                            // 格式化成月/日，只在第一个刻度显示年份
                            let valueArr = value.split(" ");
                            return valueArr.join("\n");
                        },
                    },
                },
                yAxis: {
                    type: "value",
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: ["#ebf2fc"],
                            type: "solid",
                        },
                    },
                    axisLabel: {
                        show: true,
                        showMaxLabel: false,
                        color: "#06D3CD",
                        // fontFamily: 'PingFangSC',
                        // fontSize: 14,
                        // fontWeight: 300,
                        textStyle: {
                            color: "#a4b2cc",
                        },
                    },
                },
                calculable: true,
                series: [
                    {
                        name: "  正面",
                        type: "line",
                        smooth: true,
                        data: this.lineData.positiveLine.map((item) => item.value),
                        hoverAnimation: false,
                        symbol: "circle",
                        symbolSize: 10,
                        lineStyle: {
                            color: "#fd5f60",
                            shadowColor: "rgba(253,95,96,0.7)",
                            shadowOffsetX: 0,
                            shadowOffsetY: 5,
                            shadowBlur: 10,
                        },
                        itemStyle: {
                            normal: {
                                color: "#fd5f60",
                            },
                        },
                        showSymbol: false,
                    },
                    {
                        name: "  负面",
                        type: "line",
                        smooth: true,
                        data: this.lineData.negativeLine.map((item) => item.value),
                        hoverAnimation: false,
                        symbol: "circle",
                        symbolSize: 10,
                        lineStyle: {
                            color: "#33cf92",
                            shadowColor: "rgba(51,207,146,0.7)",
                            shadowOffsetX: 0,
                            shadowOffsetY: 5,
                            shadowBlur: 10,
                        },
                        itemStyle: {
                            normal: {
                                color: "#33cf92",
                            },
                        },
                        showSymbol: false,
                    },
                    {
                        name: "  中立",
                        type: "line",
                        smooth: true,
                        data: this.lineData.neutralLine.map((item) => item.value),
                        hoverAnimation: false,
                        symbol: "circle",
                        symbolSize: 10,
                        lineStyle: {
                            color: "#43a6fb",
                            shadowColor: "rgba(67,166,251,0.7)",
                            shadowOffsetX: 0,
                            shadowOffsetY: 5,
                            shadowBlur: 10,
                        },
                        itemStyle: {
                            normal: {
                                color: "#43a6fb",
                            },
                        },

                        showSymbol: false,
                    },
                ],
            };
            lineChart.setOption(option);
        },
    }
}